<template>
<div class="home_index">
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="4">
        <div class="grid-content bg-purple-dark">
          <div>消费总额</div>
          <div>{{item.moneyCount}}</div>
        </div>
      </el-col>
       <el-col :span="4">
        <div class="grid-content bg-purple-light">
         <div>账户余额</div>
          <div>{{item.money}}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
         <div>代金券</div>
          <div>{{item.give_money}}</div>
        </div>
      </el-col>
    </el-row>
    <div class="form_select">
      <div>
          <el-input class="select_input1" size="small" v-model="searchKey" 
          placeholder="会员手机号码或姓名"></el-input>
          <el-button type="primary"  size="small" @click="search">
          &nbsp;&nbsp;搜&nbsp;&nbsp;索&nbsp;&nbsp;
          </el-button>
      </div>
      <div class="select_right">
          <el-button type="success" size="small" @click="dialog('addRecharge')">充&nbsp;&nbsp;&nbsp;值</el-button>
          <el-button type="primary" size="small" @click="dialog('addCard')">开&nbsp;&nbsp;&nbsp;卡</el-button>
          <el-button type="danger" size="small" @click="dialog('addMark')">预&nbsp;&nbsp;&nbsp;约</el-button>
          <el-button type="primary" size="small" @click="exportExcel">导出会员档案</el-button>
      </div>
    </div>
    <div class="info_form">
        <el-form ref="form" :model="form" label-width="100px" class="user_form">
          <el-form-item label="会员姓名">
            <el-input v-model="form.username" class="select_input"></el-input>
          </el-form-item>
          <el-form-item label="会员电话">
            <el-input v-model="form.phone" class="select_input"></el-input>
          </el-form-item>
          <el-form-item label="会员生日">
            <el-date-picker
              @change="birthDayChage"
              v-model="form.birthDay"
              type="date"
              placeholder="会员生日" 
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结婚纪念日">
            <el-date-picker
              @change="marryDayChage"
              v-model="form.marryDay"
              type="date"
              placeholder="结婚纪念日" 
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="子女生日">
            <el-date-picker
              @change="sonBirthDayChage"
              v-model="form.sonBirthDay"
              type="date"
              placeholder="子女生日" 
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="会员等级">
            <el-select v-model="form.lv" placeholder="会员等级" @change="userChange($event,'lv')">
              <el-option v-for="(item,index) in cate" :key="index" :label="item.name" :value="item.lv"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户来源">
            <el-select v-model="form.source" placeholder="客户来源" @change="userChange($event,'source')">
              <el-option v-for="(item,index) in sourceArr" :key="index" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="美容师">
            <el-select v-model="form.user_id" placeholder="美容师" @change="userChange($event,'user_id')">
              <el-option v-for="(item,index) in userArr" :key="item.uid" :label="item.realname" :value="item.uid"></el-option>
            </el-select>
          </el-form-item>
          <div align="center">
            <el-button type="primary" @click="userSubmit">确 定</el-button>
          </div>
        </el-form>
        <el-form ref="form" :model="other" label-width="100px" class="user_form">
          <el-form-item label="皮肤分析" class="item_height">
            <el-input v-model="other.skinList" disabled class="select_input"></el-input>
            <el-button icon="el-icon-more" size="small" @click="dialog('skinList')">更多</el-button>
          </el-form-item>
          <el-form-item label="皮肤类型" class="item_height">
            <el-input v-model="other.skinType" disabled class="select_input"></el-input>
            <el-button icon="el-icon-more" size="small" @click="dialog('skinType')">更多</el-button>
          </el-form-item>
          <el-form-item label="充值记录" class="item_height">
            <el-input v-model="other.rechargeCount" disabled class="select_input"></el-input>
            <el-button icon="el-icon-more" size="small" @click="dialog('recharge')">更多</el-button>
          </el-form-item>
          <el-form-item label="购卡记录" class="item_height">
            <el-input v-model="other.cardCount" disabled class="select_input"></el-input>
            <el-button icon="el-icon-more" size="small" @click="dialog('card')">更多</el-button>
          </el-form-item>
          <el-form-item label="耗卡记录" class="item_height">
            <el-input v-model="other.markCount" disabled class="select_input"></el-input>
            <el-button icon="el-icon-more" size="small" @click="dialog('markSon')">更多</el-button>
          </el-form-item>
          <el-form-item label="现金消费" class="item_height">
            <el-input v-model="other.moneyCount" disabled class="select_input"></el-input>
            <el-button icon="el-icon-more" size="small" @click="dialog('money')">更多</el-button>
          </el-form-item>
          <el-form-item label="购买产品" class="item_height">
            <el-input v-model="other.orderCount" disabled class="select_input"></el-input>
            <el-button icon="el-icon-more" size="small" @click="dialog('buy')">更多</el-button>
          </el-form-item>
          <el-form-item label="个人情况" style="padding-right:20px;">
              <textarea class="el-textarea__inner" v-model="other.remark"></textarea>
           <!--<el-input type="textarea"  placeholder="请输入内容" v-model="other.remark"></el-input>-->
          </el-form-item>
          <div align="center">
            <el-button type="primary" @click="otherSubmit">确 定</el-button>
          </div>
        </el-form>
    </div>
    <skinList :show="skinListShow" :id="form.id" :checkList="checkList"  @func="dialogClose"></skinList>
    <skinType :show="skinTypeShow" :id="form.id" :mySkin="other.skinType"  @func="dialogClose"></skinType>
    <recharge :show="rechargeShow" :list="rechargeList" @func="dialogClose"></recharge>
    <card :show="cardShow" :list="cardList" @func="dialogClose"></card>
    <markSon :show="markSonShow" :list="markList" @func="dialogClose"></markSon>
    <money :show="moneyShow" :list="moneyList" @func="dialogClose"></money>
    <buy :show="buyShow" :list="buyList" @func="dialogClose"></buy>
    <addRecharge :show="addRechargeShow" :id="form.id" @func="dialogClose"></addRecharge>
    <addCard :show="addCardShow" :id="form.id" :cardName="cardName" @func="dialogClose"></addCard>
    <addMark :show="addMarkShow" :id="form.id" :myCard="myCard" :user="userArr" @func="dialogClose"></addMark>
</div>
</template>
<script>
import skinList from "./skinList"
import skinType from "./skinType"
import recharge from "./recharge"
import markSon from "./markSon"
import card from "./card"
import money from "./money"
import buy from "./buy"
import addRecharge from "./addRecharge"
import addCard from "./addCard"
import addMark from "./addMark"
export default {
  data() {
    return {
      form:{
        birthDay:'',
        marryDay:'',
        sonBirthDay:''
      },
      member_id:0,
      item:{},
      cate:[
          {id:1,name:'A类会员',lv:'A'},
          {id:2,name:'B类会员',lv:'B'},
          {id:3,name:'C类会员',lv:'C'},
          {id:4,name:'D类会员',lv:'D'}
        ],
      sourceArr:['主动进店','大众点评','朋友推荐','地推拓客','小程序','异业联盟','其他'],
      userArr:[
        {id:0,realname:'无',uid:0}
      ],
      other:{},
      skinListShow:false,
      skinTypeShow:false,
      rechargeShow:false,
      cardShow:false,
      markSonShow:false,
      moneyShow:false,
      buyShow:false,
      addRechargeShow:false,
      addCardShow:false,
      addMarkShow:false,
      checkList:[],
      rechargeList:[],
      cardList:[],
      markList:[],
      moneyList:[],
      buyList:[],
      searchKey:'',
      cardName:[
        {id:0,name:'请选择'}
      ],
      myCard:[
        {id:0,card_name:'请选择'}
      ]
    };
  },
  components: {
    "skinList": skinList,
    "skinType": skinType,
    "recharge": recharge,
    "card": card,
    "markSon": markSon,
    "money": money,
    "buy": buy,
    "addRecharge": addRecharge,
    "addCard": addCard,
    "addMark": addMark
  },
  created:function(){
    this.member_id = this.$route.query.id
    if(this.member_id){
      this.getFile()
      this.getUser()
    }
  },
  methods: {
    getFile:function(){
      var data = {
        oa_id:localStorage.getItem('oa_id'),
				member_id:this.member_id
      }
      var that = this
      this.$get('manage/member/file',data).then((res) => {
          that.form.id = res.data.id
          that.form.username = res.data.username
          that.form.phone = res.data.phone
          that.form.birthDay = res.data.birthDay
          that.form.marryDay = res.data.marryDay
          that.form.sonBirthDay = res.data.sonBirthDay
          that.form.lv = res.data.lv
          that.form.source = res.data.source
          that.form.user_id = res.data.user_id
          that.item.moneyCount = res.data.moneyCount
          that.item.money = res.data.money
          that.item.give_money = res.data.give_money
          that.other.remark = res.data.remark
          that.other.orderCount = res.data.orderCount
          that.other.moneyCount = res.data.moneyCount
          that.other.markCount = res.data.markCount
          that.other.cardCount = res.data.cardCount
          that.other.rechargeCount = res.data.rechargeCount
          that.other.skinType = res.data.skinType
          that.other.skinList = res.data.skinList
          that.$forceUpdate();
      })
    },
    birthDayChage:function(e){
      this.form.birthDay = e
    },
    marryDayChage:function(e){
      this.form.marryDay = e
    },
    sonBirthDayChage:function(e){
      this.form.sonBirthDay = e
    },
    getUser:function(){
      var data = {oa_id:localStorage.getItem('oa_id')}
      var that = this
      this.$get('pc/staff/all',data).then((res) => {
          var userArr = that.userArr
          that.userArr = userArr.concat(res.data)
      })
    },
    userSubmit:function(){
      if(!this.member_id){
        this.$message.error('请输入手机号码或姓名搜索!');
        return;
      }
      var validate = {
        username:'会员姓名不能为空',
        phone:'会员手机号码必填',
        birthDay:'会员生日不能为空',
        lv:'请选择会员等级',
        source:'请选择客户来源'
      }
      for(var x in validate){
        if(!this.form[x]){
          this.$message.error(validate[x]);
          return false;
          break;
        }
      }
      var that = this
      this.$post('pc/user/save',this.form).then((res) => {
          if(res.code == 1){
            that.$message.success(res.msg);
          }else{
            that.$message.error(res.msg);
          }
      })
    },
    otherSubmit:function(){
      if(!this.member_id){
        this.$message.error('请输入手机号码或姓名搜索!');
        return;
      }
      var data = {
        remark:this.other.remark,
        oa_id:localStorage.getItem('oa_id'),
        user_id:localStorage.getItem('company_uid'),
        member_id :this.member_id
      }
      var that = this
      this.$post('manage/status/add',data).then((res) => {
          if(res.code == 1){
            that.$message.success('修改成功');
          }else{
            that.$message.error('修改失败');
          }
      })
    },
    dialog:function(key){
      if(!this.member_id){
        this.$message.error('请输入手机号码或姓名搜索!');
        return;
      }
      this[key+'Show'] = true
      if(key == 'skinList' && this.other.skinList){
        this.checkList = this.other.skinList.split(',')
      }
      if(key == 'recharge' && this.rechargeList.length == 0){
        this.getRechargeList()
      }
      if(key == 'card' && this.cardList.length == 0){
        this.getCardList()
      }
      if(key == 'markSon' && this.markList.length == 0){
        this.getMarkList()
      }
      if(key == 'money' && this.moneyList.length == 0){
        this.getMoneyList()
      }
      if(key == 'buy' && this.buyList.length == 0){
        this.getBuyList()
      }
      if(key == 'addCard' && this.cardName.length == 1){
        this.getCardName()
      }
      if(key == 'addMark'){
        if(this.myCard.length == 1){
          this.getMyCard()
        }
        if(this.userArr.length == 1){
          this.getUser()
        }
      }
    },
    dialogClose:function(data){
      this[data.key+'Show'] = false
      if(data.type){
        this.other[data.key] = data.value
      }
      if(data.update){
        this.getFile()
      }
    },
    getRechargeList:function(){
      var data = {member_id:this.member_id,}
      var that = this
      this.$get('pc/recharge/all',data).then((res) => {
        that.rechargeList = res.data
      })
    },
    getCardList:function(){
      var data = {member_id:this.member_id,}
      var that = this
      this.$get('pc/card/all',data).then((res) => {
        that.cardList = res.data
      })
    },
    getMarkList:function(){
      var data = {member_id:this.member_id,}
      var that = this
      this.$get('pc/mark/all',data).then((res) => {
        that.markList = res.data
      })
    },
    getMoneyList:function(){
      var data = {member_id:this.member_id}
      var that = this
      this.$get('pc/money/all',data).then((res) => {
          that.moneyList = res.data
      })
    },
    getBuyList:function(){
      var data = {member_id:this.member_id}
      var that = this
      this.$get('pc/user/buy',data).then((res) => {
          that.buyList = res.data
      })
    },
    getCardName:function(){
      var data = {oa_id:localStorage.getItem('oa_id')}
      var that = this
      this.$get('pc/card/name',data).then((res) => {
          that.cardName = that.cardName.concat(res.data)
      })
    },
    getMyCard:function(){
      var data = {
				oa_id:localStorage.getItem('oa_id'),
				member_id:this.member_id
			}
      var that = this
      this.$get('manage/card/user',data).then((res) => {
          that.myCard = that.myCard.concat(res.data)
      })
    },
    search:function(){
      var data = {keyword:this.searchKey}
      var that = this
      this.$get('pc/user/search',data).then((res) => {
        if(res.code == 1){
          if(res.data !== that.member_id){
            that.member_id = res.data
            that.getFile()
            if(that.userArr.length == 1){
              that.getUser()
            }
          }
        }else{
          that.$message.error(res.msg);
        }
      })
    },
    exportExcel:function() {
      if(!this.member_id){
        this.$message.error('请输入手机号码或姓名搜索!');
        return;
      }
      var url = this.apiUrl + 'pc/user/exportFile?member_id='+this.member_id
      window.location.href = url
    },
    userChange:function(e,key){
      this.form[key] = e
      this.$forceUpdate()
    }
  }
};
</script>
<style>
.home_index{
    padding:0 20px 0 20px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    height: 80px;
    text-align:center;
    display: flex;
    flex-direction:column;
    justify-content:center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
.info_form{
    display: flex;
    flex-direction:row;
    justify-content:space-between;
    padding:0 50px;
    margin-top:20px;
}
.user_form{
  width:42%;
  padding-top:20px;
  border:1px solid #DCDFE6;
  border-radius:20px;
  padding-bottom:20px;
}
.item_height{
  height: 40px;
  line-height: 40px;
}
</style>